<template>
    <div class="add-user">
        <el-dialog title="User Controller" width="850px" top="10vh" v-model="visible" :close-on-click-modal="false"
            :show-close="false" :center="true" :modal="true">
            <div class="type">
                <el-radio-group v-model="type">
                    <el-radio :label="0">Copy From Existing User</el-radio>
                    <el-radio :label="1">Add single User</el-radio>
                </el-radio-group>
            </div>
            <div class="component">
                <copyUser v-show="type === 0" @closeDialog="close"></copyUser>
                <roleUser v-show="type === 1" @closeDialog="close" :showUser="false"></roleUser>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { defineComponent, ref } from 'vue';
import roleUser from './roleUser.vue';
import copyUser from './copyUser.vue';
export default defineComponent({
    components: {
        copyUser, roleUser
    },
    name: 'AddUser',
    emits: ['closeAddDialog'],
    setup(props, { emit }) {
        const visible = ref(true);
        const type = ref(0);
        const close = (reload) => {
            emit('closeAddDialog', false, reload)

        }
        //外部定义
        // const closeAddDialog=(type,reload)=>{
        //     addVisible.value = type;
        //     realod && getList();
        // }
        return {
            visible, type, close
        }
    }
})

</script>
<style lang="less" scoped>
:deep(.el-dialog) {
    overflow: hidden;
    resize: both; //缩放
    min-width: 850px;
    max-width: calc(100% - 40px);
    min-height: 455px;
    height: 455px;
    max-height: calc(100% - 10vh - 50px);
    box-sizing: border-box;
}

:deep(el-dialog__body) {
    padding: 0 25px;
    height: calc(100% - 54.2px);
}

.type {
    text-align: center;
}

.component {
    padding: 10px 1px;
    height: calc(100% - 32px);
    position: relative;
}
</style>